
<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">系统管理</span>
        </div>
        <div class="header-right-wraper">
          <Input
            v-model="value"
            placeholder="请输入关键字"
            style="width: 200px"
            class="headerMar"
          />
          <Button
            type="primary"
            @click="addMapUrl"
            class="system-btn-style headerMar"
            style="margin-right: 10px"
          >
            <Icon type="ios-search" />&nbsp;查询
          </Button>
          <Button
            type="warning"
            @click="checkTask = true"
            class="system-btn-style headerMar"
          >
            <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;节点
          </Button>
          <Button
            type="warning"
            @click="checkTaskZu = true"
            class="system-btn-style headerMar"
          >
            <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;节点组
          </Button>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList
            ref="table"
            :getColumn="getColumns"
            :getAxios="getAxios"
            selection
            @selectionChange="selectionChange"
          >
            <template v-slot:status="item">
              <i-switch
                v-model="item.data.row.version"
                :before-change="beforeChange"
                 @on-change ='changedStatus(data,item.data.row)'
              >
                <span slot="open">开</span>
                <span slot="close">关</span>
              </i-switch>
            </template>
            <template v-slot:show_details="item">
              <CButton
                title="查看"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="addMapUrl(item.data.row)"
                >查看
              </CButton>
              <CButton
                title="修改"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="addMapUrl(item.data.row)"
                >修改
              </CButton>
              <CButton
                title="删除"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="addMapUrl(item.data.row)"
                >删除</CButton
              >
            </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>

    <!--删除任务-->
    <Modal v-model="delShow" draggable scrollable title="删除任务">
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除任务</span>
      </p>
      <div class="delKuangBody">
        <p>您正在删除该任务信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!--创建接点-->
    <Modal v-model="checkTask" draggable scrollable :width="600">
      <p slot="header" class="modalHeader">
        <!-- <img src="@/assets/icons/search.png" alt />-->
        <span style="margin-left: 5px">{{
          currentClickItem.id ? "更新节点信息" : "创建节点信息"
        }}</span>
      </p>
      <div class="delKuangBody">
        <Form :model="formItem" :label-width="80">
          <FormItem label="主机名">
            <Input
              v-model="formItem.input"
              placeholder="请输入节点名称"
            ></Input>
          </FormItem>
          <FormItem label="别名">
            <Input v-model="formItem.input" placeholder="请输入别名"></Input>
          </FormItem>
          <FormItem label="IP">
            <Input v-model="formItem.input" placeholder="请输入ip地址"></Input>
          </FormItem>
          <FormItem label="操作系统">
            <Select v-model="formItem.select">
              <Option value="0">Linux</Option>
              <Option value="1">Windows</Option>
              <Option value="2">IOS</Option>
            </Select>
          </FormItem>
          <FormItem label="GPU">
            <CheckboxGroup v-model="formItem.input">
              <Checkbox label="true">GPU</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </Form>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="handleReset" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="checkTaskOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!--创建节点组-->
    <Modal v-model="checkTaskZu" draggable scrollable :width="600">
      <p slot="header" class="modalHeader">
        <!-- <img src="@/assets/icons/search.png" alt />-->
        <span style="margin-left: 5px">创建节点组信息</span>
      </p>
      <div class="delKuangBody">
        <Form :model="formItem" :label-width="80">
          <FormItem label="组名">
            <Input
              v-model="formItem.input"
              placeholder="请输入节点组名称"
            ></Input>
          </FormItem>
          <FormItem label="节点">
            <Input v-model="formItem.input" placeholder="请输入别名"></Input>
          </FormItem>
          <FormItem label="描述">
            <Input
              v-model="formItem.input"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入ip地址"
            ></Input>
          </FormItem>
        </Form>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="handleReset" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="checkTaskOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/template/table/TableList";
export default {
  name: "systemMonitor",
  components: { TableList },
  data() {
    return {
      getColumns: [
        {
          key: "nodeName",
          title: "主机名",
          align: "center",
          minWidth: 100,
        },
        {
          key: "name",
          title: "节点名称",
          align: "center",
          minWidth: 120,
        },
        {
          key: "ipAddress",
          title: "IP地址",
          align: "center",
          minWidth: 120,
        },
        {
          key: "cpuUsage",
          title: "CPU使用率",
          align: "center",
          minWidth: 100,
        },
        {
          key: "operateSystem",
          title: "操作系统",
          align: "center",
          minWidth: 100,
        },
        // {
        //   key: "status",
        //   slot: "status",
        //   title: "状态",
        //   align: "center",
        //   minWidth: 100,
        // },
        {
          key: "memoryFree",
          title: "空闲内存(G)",
          align: "center",
          minWidth: 100,
        },
        {
          key: "memoryCache",
          title: "总内存(G)",
          align: "center",
          minWidth: 100,
        },
        {
          key: "diskFree",
          title: "空闲磁盘(T)",
          align: "center",
          minWidth: 100,
        },
        {
          key: "diskTotal",
          title: "总磁盘(T)",
          align: "center",
          minWidth: 100,
        },
        {
          title: "GPU",
          key: "gpuInfo",
          align: "center",
          width: "100",
        },
        {
          key: "status",
          slot: "status",
          title: "禁用",
          align: "center",
          width: "120",
        },
        {
          title: "操作",
          key: "show_details",
          slot: "show_details",
          align: "center",
          width: 220,
        },
      ],
      getAxios: {
        url: this.$api.monitorApi.clusterNode, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },

      checkTask: false,
      formItem: {
        input: "",
        select: "",
      },
      currentClickItem: {},

      checkTaskZu: false,
    };
  },
  mounted() {},
  methods: {
       update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.upData = val;
      // this.getModelCategoryTree();
    },
    updateCancel() {
      this.updateShow = false;
    },
       changedStatus(data,item){
      let that = this
      let a =  data ? "enable" : "disable"
       let url = that.$api.monitorApi.nodesStatus + a + '/nodes'
      //  let params =[ {
      //    nodeNames:item.nodeName
      //  }]
        this.http.get(url).then((res) => {
        console.log(res,'resresresers');
      });
    },
    checkTaskOk(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.checkTask = false;
      this.$refs[name].resetFields();
    },

    beforeChange() {
      return new Promise((resolve, reject) => {
        this.$Modal.confirm({
          title: "切换确认",
          content: "您确认要切换开关状态吗？",
          onOk: () => {
            resolve();
          },
          onCancel: () => {
            reject();
          },
        });
      });
    },

    selectionChange(data) {
      // 选中的数据
    },
  },
};
</script>

<style scoped>
.rightCard {
  width: 80%;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}
.headerMar {
  margin-left: 10px;
}
/deep/.ivu-form-item {
  margin-bottom: 10px;
}
</style>

